<template>
	<div>
		<div class="herder">
			<div :class="{
				active:category  ==0
			}" @click="tabs(0)">待审批 ({{underReview}})</div>
			<div :class="{
				active:category  ==1
			}" @click="tabs(1)">已审批 ({{reviewed}})</div>
		</div>
		<div class="box" v-for="(v,i) in list" @click="jumpTo('/pages/supervise/approve',{
			id:v.id,
			type:v.category,
			state:category
		})">
			<div class="box_item">
				<div class="box_herder">
					<div :class="{
						herderActive:v.category  == 1
					}">{{v.category ==1?'延期审批':'任务审批'}}</div>
				</div>
				<div class="flex  padding20rpx" >
					<div class="box_lable">督办类型:</div>
					<div class="box_value">{{v.handleTypeStr}}</div>
				</div>
				<div class="flex  padding20rpx" >
					<div class="box_lable">工作内容:</div>
					<div class="box_value">{{v.workContent}}</div>
				</div>
				<div class="flex  padding20rpx" >
					<div class="box_lable">责任人:</div>
					<div class="box_value">{{v.onusUserStr}}</div>
				</div>
				<div class="flex  padding20rpx" >
					<div class="box_lable">计划时间:</div>
					<div class="box_value">{{v.startDate}} - {{v.endDate}}</div>
				</div>
			</div>
		</div>
		<u-empty mode="list" v-if="list.length<=0" marginTop="80">
		</u-empty>
	</div>
</template>

<script>
	import {handleApprovalList,getHandleApprovalNumbers} from '@/api/supervise.js'
	export default {
		data() {
			return {
				category : 0,
				list:[],
				underReview:0,
				reviewed:0
			}
		},
		onLoad() {
			if (this.$mp.query.token) {
				uni.setStorageSync('token', this.$mp.query.token)
			}
		},
		onShow() {
			this.getList()
			this._getHandleApprovalNumbers()
		},
		methods:{
			getList(){
				handleApprovalList({
					state:this.category,
					PAGE_NO: 1,
					PAGE_SIZE: 100000
				}).then(res=>{
					console.log(res,'res');
					this.list = res.rows
				})
			},
			_getHandleApprovalNumbers(){
				getHandleApprovalNumbers().then(res=>{
					console.log(res);
					this.underReview = res.datas.underReview
					this.reviewed =res.datas.reviewed
				})
			},
			tabs(type){
				this.category = type
				this.getList()
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
</style>
<style lang="scss" scoped>
	.herder {
		height: 80rpx;
		text-align: center;
		display: flex;
		align-items: center;

		div {
			line-height: 80rpx;
			flex: 1;
			background-color: #FFF;
		}

		div:nth-child(1) {
			border-right: 1rpx solid #E0E0E0;
		}
	}

	.active {
		background-color: #267DFF !important;
		color: #FFF;
		border-right: none !important;
	}
	.padding20rpx{
		padding: 0 20rpx;
		margin-top: 20rpx;
	}

	.box {
		width: 95%;
		margin: 0 auto;
		border-radius: 8rpx;
		background-color: #FFF;
		margin-top: 20rpx;
		padding: 20rpx 0;
		font-size: 30rpx;
		&_herder {
			display: flex;
			justify-content: flex-end;
			padding: 0 20rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #E0E0E0;

			div {
				border: 1rpx solid #F59A23;
				font-size: 26rpx;
				padding: 6rpx 10rpx;
				border-radius: 8rpx;
				color: #F59A23;
			}
			.herderActive {
				color: #267DFF !important;
				border-color: #267DFF !important;
			}
		}
		&_lable{
			color: #999999;
		flex: 0 0 auto;
		}
		&_value{
			margin-left: 10rpx;
		}
	}
</style>